<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 组件展示</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
    <style>
        .component-section {
            padding: 2rem 0;
            border-bottom: 1px solid #dee2e6;
        }
        .component-section:last-child {
            border-bottom: none;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary sticky-top">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="bi bi-bootstrap-fill me-2"></i>Bootstrap 组件展示
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" href="#alerts">警告框</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#buttons">按钮</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#cards">卡片</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#forms">表单</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container py-5">
        <!-- 警告框部分 -->
        <section id="alerts" class="component-section">
            <h2 class="mb-4">警告框 (Alerts)</h2>
            <div class="alert alert-primary" role="alert">
                这是一个主要警告框
            </div>
            <div class="alert alert-success" role="alert">
                这是一个成功警告框
            </div>
            <div class="alert alert-danger" role="alert">
                这是一个危险警告框
            </div>
            <div class="alert alert-warning alert-dismissible fade show" role="alert">
                这是一个可关闭的警告框
                <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
            </div>
        </section>

        <!-- 按钮部分 -->
        <section id="buttons" class="component-section">
            <h2 class="mb-4">按钮 (Buttons)</h2>
            <div class="mb-3">
                <button class="btn btn-primary me-2">主要按钮</button>
                <button class="btn btn-secondary me-2">次要按钮</button>
                <button class="btn btn-success me-2">成功按钮</button>
                <button class="btn btn-danger me-2">危险按钮</button>
                <button class="btn btn-warning me-2">警告按钮</button>
                <button class="btn btn-info me-2">信息按钮</button>
            </div>
            <div class="mb-3">
                <button class="btn btn-outline-primary me-2">轮廓主要按钮</button>
                <button class="btn btn-outline-secondary me-2">轮廓次要按钮</button>
                <button class="btn btn-outline-success me-2">轮廓成功按钮</button>
            </div>
            <div>
                <button class="btn btn-primary btn-lg me-2">大按钮</button>
                <button class="btn btn-primary me-2">默认按钮</button>
                <button class="btn btn-primary btn-sm">小按钮</button>
            </div>
        </section>

        <!-- 卡片部分 -->
        <section id="cards" class="component-section">
            <h2 class="mb-4">卡片 (Cards)</h2>
            <div class="row">
                <div class="col-md-4 mb-4">
                    <div class="card">
                        <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="示例图片">
                        <div class="card-body">
                            <h5 class="card-title">基础卡片</h5>
                            <p class="card-text">这是一个基础卡片的示例，包含图片和文本内容。</p>
                            <a href="#" class="btn btn-primary">查看详情</a>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card">
                        <div class="card-header">
                            卡片头部
                        </div>
                        <div class="card-body">
                            <h5 class="card-title">带头部的卡片</h5>
                            <p class="card-text">这个卡片包含头部和底部的额外内容。</p>
                        </div>
                        <div class="card-footer text-muted">
                            2 天前更新
                        </div>
                    </div>
                </div>
                <div class="col-md-4 mb-4">
                    <div class="card text-white bg-primary">
                        <div class="card-body">
                            <h5 class="card-title">彩色卡片</h5>
                            <p class="card-text">这是一个带有背景色的卡片示例。</p>
                            <a href="#" class="btn btn-light">了解更多</a>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 表单部分 -->
        <section id="forms" class="component-section">
            <h2 class="mb-4">表单 (Forms)</h2>
            <form class="row g-3">
                <div class="col-md-6">
                    <label for="inputEmail4" class="form-label">邮箱</label>
                    <input type="email" class="form-control" id="inputEmail4">
                </div>
                <div class="col-md-6">
                    <label for="inputPassword4" class="form-label">密码</label>
                    <input type="password" class="form-control" id="inputPassword4">
                </div>
                <div class="col-12">
                    <label for="inputAddress" class="form-label">地址</label>
                    <input type="text" class="form-control" id="inputAddress">
                </div>
                <div class="col-md-6">
                    <label for="inputCity" class="form-label">城市</label>
                    <input type="text" class="form-control" id="inputCity">
                </div>
                <div class="col-md-4">
                    <label for="inputState" class="form-label">省份</label>
                    <select id="inputState" class="form-select">
                        <option selected>选择...</option>
                        <option>北京</option>
                        <option>上海</option>
                        <option>广州</option>
                    </select>
                </div>
                <div class="col-md-2">
                    <label for="inputZip" class="form-label">邮编</label>
                    <input type="text" class="form-control" id="inputZip">
                </div>
                <div class="col-12">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" id="gridCheck">
                        <label class="form-check-label" for="gridCheck">
                            同意条款
                        </label>
                    </div>
                </div>
                <div class="col-12">
                    <button type="submit" class="btn btn-primary">提交</button>
                </div>
            </form>
        </section>
    </div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h5>Bootstrap 组件展示</h5>
                    <p>这是一个展示常用 Bootstrap 组件的示例页面。</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p class="mb-0">© 2024 Bootstrap 演示</p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>